<template>
  <div class='memberdetail-container'>
    <el-row>
      <el-col :span="24"
              class="memberdetail-top">
        <el-col :span="16"
                align="right">
          <el-select v-model="sync_state"
                     placeholder="同步状态">
            <el-option label="全部状态"
                       value=""></el-option>
            <el-option v-for="item in syncList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6"
                align="right">
          <el-input class="file-input"
                    placeholder="请输入文件名"></el-input>
        </el-col>
        <el-col :span="2"
                align="right">
          <el-button type="primary">查询</el-button>
        </el-col>
      </el-col>
      <el-col :span="24">
        <el-table :highlight-current-row='true'
                  border
                  :header-cell-style="{background:'#f5f5f5'}"
                  :data='memberTable.list'>
          <el-table-column prop='no'
                           label='序号'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='file_name'
                           label='文件名'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='file_size'
                           label='文件大小'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='sync_state'
                           label='同步状态'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='upload_time'
                           label='上传时间'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='sync_time'
                           label='同步时间'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <el-pagination @current-change='handlePageChange'
                       :current-page='requestParam.page'
                       :page-size='requestParam.page_size'
                       layout='total,sizes,prev, pager, next, jumper'
                       background
                       :total='memberTable.total_count'
                       id="bottomBox"
                       align='center'>
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      requestParam: {
        page: 1,
        page_size: 10
      },
      memberTable: {
        list: [],
        total_page: 0,
        total_count: 0
      },
      sync_state: "",
      syncList: [
        {
          value: '1',
          label: '同步状态'
        }, {
          value: '2',
          label: '同步'
        }, {
          value: '3',
          label: '未同步'
        },]
    }
  },
  methods: {
    handlePageChange (page) {

    }
  },
  created () {

  },
  mounted () {

  }
}
</script>
<style scoped lang='scss'>
#bottomBox {
  margin-top: 20px !important;
}
.memberdetail-container {
  background: #fff;
  padding: 40px 20px;
  .memberdetail-top {
    margin-bottom: 20px;
    .file-input {
      width: 260px;
    }
  }
}
</style>
